<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
  <script src="./dayjs.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>格式化后的时间</h1>
    <p>现在是:{{getTimeM()}}</p>
    <p>现在是:{{getTimeC}}</p>
    <!-- 过滤器写法 XX | FN  -->
    <p>现在是过滤器 :{{time | getTimeF("YYYY-MM-DD ") }}</p>
    <p>现在是截取:{{time | getTimeF | sliceTimeF}}</p>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        time: Date.now()
      }
    },
    filters: {
      getTimeF(value, str = "YYYY-MM-DD") {
        //value XX data 中的数据
        // console.log('value', value);
        return dayjs(value).format(str)
      },
      sliceTimeF(value) {
        return dayjs(value).format("YYYY")
      }
    },
    computed: {
      getTimeC() {
        return dayjs(this.time).format("YYYY-MM-DD HH-mm:ss")
      }
    },
    methods: {
      getTimeM() {
        return dayjs().format("YYYY-MM-DD HH-mm:ss")
      }
    }
  })
</script>

</html>